import React from 'react'
// ===================================================================== Temp
import Table from '#cpt/temp/Table'
import TableControls from '#cpt/temp/TableControls'
// ===================================================================== Declare
const { $Lazy, $http } = window
// ===================================================================== Lazy
const Modal 			= $Lazy.state(()=>import('@antd/modal'))
const SplitDom			= $Lazy.hook(()=>import('../../cpt/split-dom'))
const ActionTable		= $Lazy.state(()=>import('./action-table'))
const Confirm 			= $Lazy.file(()=>import('@antd/common/confirm-submit'))
// ===================================================================== component
class Index extends React.Component{
	state = {
		data: []
	}
	
	open = uuid => {
		this.uuid = uuid
		this.fetch()
		this.modalRef.open()
	}
	
	componentDidMount() {
		this.getAction()
	}
	
	fetch = () => this.actionTableRef.refs.ref.fetch(this.uuid)
	
	getAction = () => $http.pull(this,'qc-rule/action', {isIndex: 1}).then(data => this.setState({data}))
	
	// 表单
	cols = [
		{ title: '操作', 			dataIndex: 'name', 			width:320 },
		{ title: '代码',			dataIndex: 'code', 			width:100 },
		TableControls.controls.call(this, { width: 50 })
	]
	
	// 表格操作按钮
	table_controls = (text,{ name }) => {
		return [
			TableControls.click.call(this, '添加', () => {
				Confirm.then( f=> {
					f.call(this, 'qc-data/edit', { title: '添加', param: {uuid: this.uuid, action: name} })
				} )
			})
		]
	}
	
	render(){
		return <>
			<Modal
				title	= '操作日志'
				width 	= {600}
				height  = '70%'
				// okText	= '数据'
				// noCancel
				noOk
				noText 	= '关闭'
				onRef	= { ref => this.modalRef = ref }
				isFullScroll
			>
				<div className='h fv pb10'>
					<div className='fv ex'>
						<SplitDom label='可用操作' />
						<div className='fx ex' style={{margin: '0 -10px'}}>
							{ Table.call(this, {isIndex: 1}) }
						</div>
					</div>
					<div className='fv ex'>
						<SplitDom label='现有操作' />
						<div className='fx ex' style={{margin: '0 -10px'}}>
							<ActionTable ref={ref => this.actionTableRef = ref} />
						</div>
					</div>
				</div>
			</Modal>
		</>
	}
}

export default Index